<!--
 * @Author: 栗佳琪 2745602478@qq.com
 * @Date: 2022-11-16 20:18:44
 * @LastEditors: 崔凤瑶 167839439@qq.com
 * @LastEditTime: 2025-09-26 17:30:23
 * @FilePath: \团队项目5\am-ui\src\pages\am\monitor\PointInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Description: 历史数据
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: 栗佳琪 2745602478@qq.com
 * @LastEditTime: 2025-09-24 17:57:03
-->
<template>
  <div>
    <el-row>
      <el-col :span="5">
        <div class="tree">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>
          <el-tree @node-click="handlerClick" class="filter-tree" :data="EngData" :props="defaultProps"
            :filter-node-method="filterNode" ref="tree">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="19">
        <div v-if="params.id" class="table">
          <div class="top" style="height: 28px;width: 100%;background-color: #f4f4f4;line-height: 28px;">
            <i class="el-icon-s-goods"></i>
            工程信息
          </div>
          <div class="content" style="height: 300px;width:100%;">
            <p class="el-row" style="height: 50px;width:100%;">
              <el-row>
                <el-col :span="12"> <el-tag type="info">工程编号</el-tag>{{ info.engineer ? info.engineer.serial_number: "" }} </el-col>
                <el-col :span="12"> <el-tag type="info">工程名称</el-tag>{{ info.engineer ? info.engineer.name : "" }}</el-col>
              </el-row>
            </p>
            <p class="el-row" style="height: 50px;width:100%;">
              <el-row>
                <el-col :span="12"><el-tag type="info">工程类型</el-tag>{{ info.engineer ? info.engineer.type : "" }}</el-col>
                <el-col :span="12"><el-tag type="info">工程状态</el-tag><el-tag type="danger">{{ info.engineer ? info.engineer.status : ""}}</el-tag> </el-col>
              </el-row>
            </p>  
            <p class="el-row" style="height: 50px;width:100%;">
              <el-row>
                    <el-col :span="12"><el-tag type="info" >开始时间</el-tag>{{ info.engineer ? info.engineer.begin_time : ""}}</el-col>
                    <el-col :span="12"><el-tag type="info">结束时间</el-tag>{{ info.engineer ? info.engineer.end_time : ""}}</el-col>
                   </el-row>
            </p>
            <p class="el-row" style="height: 50px;width:100%;">
              <el-tag type="info">地址</el-tag>{{ info.engineer ? info.engineer.address : ""}}
            </p>
            <p class="el-row" style="height: 50px;width:100%;">
              <el-tag type="info">工程负责人</el-tag>{{ info.engineer ? info.engineer.charge_id :"" }}              
            </p>  
          </div>
          <div class="bottom" style="height: 28px;width: 100%;background-color: #f4f4f4;line-height: 28px;">
            <i class="el-icon-s-goods"></i>
            设备信息
          </div>
          <div class="content" style="height: 250px;width:100%;">
            <p class="el-row" style="height: 50px;width:100%;">
              <el-row>
                <el-col :span="12"><el-tag type="info" style="margin-right: 10px;">工程设备</el-tag>{{ info ? info.serial_number : ""}}</el-col>
                <el-col :span="12"><el-tag type="info" style="margin-left: 150px;">设备名称</el-tag>{{ infoa ? info.name : "" }}</el-col>
              </el-row>
            </p>
            <p class="el-row" style="height: 50px;width:100%;">
               <el-row>
                <el-col :span="12"><el-tag type="info" style="margin-right: 10px;">绑定状态</el-tag>{{ info ? info.engineer_id : "" }}</el-col>
                <el-col :span="12"><el-tag type="info" style="margin-left: 150px;">在线状态</el-tag>{{ info ? info.online_status : ""}}</el-col>
               </el-row> 
            </p>
          </div>
        </div>
        <div v-else style="line-height: 50px;color: red;font-size: 20px;text-align: center;">请点击设备查看数据</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { get } from '@/utils/request'
export default {
  data() {
    return {
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 表格数据源 
      monitorData: [],
      // 表单数据对象 
      form: { time: [] },
      // 树形结构展示数据 
      EngData: [],
      params: {
        id: 0
        // device_id: 0,
      },
      info: {}
    }
  },
  watch: {
    // 监听用户输入框输入的值并进行过滤 
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    // 点击节点触发 
    handlerClick(val, node) {
      // console.log(val);
      // 判断点击的是设备  将设备id 工程id page pageSize传给后端 
      if (!val.children) {
        this.params.id = val.id;
        this.getMonitor();
      }
    },
    // 搜索 
    toSearch() {
      this.params.page = 1;
      this.getMonitor();
    },
    // 封装方法获取工程设备树 
    async getEngDevData() {
      let res = await get('/engineer/findEngineerDeviceTree');
      console.log(res, '88888');
      this.EngData = res.data;
    },
    async getMonitor() {
      let res = await get("/device/findDeviceDetail", this.params);
      console.log(res, '-------');
      this.info = res.data;
    },
    filterNode(value, data) {
      // data是树形结构数据 
      if (!value) return true;
      // value输入框输入的值 
      // 返回就是包含输入框关键字的label(节点)  
      return data.name.indexOf(value) !== -1;
    },
    // tableRowClassName({ row, rowIndex }) {
    //   // console.log(rowIndex)
    //   if (rowIndex % 2 == 0 || rowIndex == 0) {
    //     return 'warning-row';
    //   } else {
    //     return 'success-row';
    //   }
    //   return '';
    // }
  },
  created() {
    this.getEngDevData();
    // this.getMonitor();
  }
}
</script>
<style lang="scss" scoped>
.tree {
  height: calc(100vh - 60px);
  padding-right: 10px;
  border-right: 1px solid #ececec;
  margin-right: 10px;
}

::v-deep .el-table .warning-row {
  background: oldlace;
}

::v-deep .el-table .success-row {
  background: #f0f9eb;
}
</style>